import React, {useEffect,useRef} from 'react';
import {connect} from 'react-redux';
import {Image,Button,message,Modal,Input,Row,Col} from 'antd';
import {LockTwoTone,UnlockTwoTone,PlusCircleOutlined,QqOutlined} from '@ant-design/icons';
import {Link} from 'react-router-dom'
import "./index.css";
import { sendActionPost,sendActionGet,sendActionDelete } from '../../../../utils/axios';

const Album=(props)=>{

    //Ref区
    const albumRef = useRef();

    const {AlbumDispatch} = props;

    // Effect区
    useEffect(()=>{
        getList()
    },[])

    //函数区
    const getList=async()=>{
        await AlbumDispatch.getListAsync();
    }

    const addAlbum=()=>{
        Modal.confirm({
            title:'新建相册',
            content:(
                <div>
                    <Input ref={albumRef} placeholder='输入新建相册名称'/>
                </div>
            ),
            async onOk(){
                const res = await sendActionPost('/api/v1/album/new',{
                    name:albumRef.current.state.value
                })
                if(res.status===200){
                    message.success('创建成功')
                    getList()
                }else{
                    message.error('创建失败')
                }
            }
        })
    }

    const handleQQ=async()=>{
        const res = await sendActionGet('/api/v1/spider/qq/code')
        console.log(res);
        Modal.info({
            title:'与我聊天',
            content:(
                <div>
                <div>绑定代码：{res.data.code}，将代码复制后发送到指定QQ即可绑定</div>
                <div><a href="http://wpa.qq.com/msgrd?v=3&uin=3044409943&site=qq&menu=yes">打开QQ</a></div>
                <Button onClick={()=>{deleteQQ()}}>点击取消QQ绑定</Button>
                </div>
            )
        })
    }

    const deleteQQ = async()=>{
        const res = await sendActionDelete('/api/v1/spider/qq/bind')
        if(res.data.success===true){
            message.success('取消绑定成功')
        }else{
            message.error('取消绑定失败')
        }
    }

    return(
        <div className='Album_allcontainer'>
        <div className="Album_container">
            
            {props.Album.albums.map((item)=>{
                return(
                    
                    <div className="Album_contentcontainer" key={item.id}>
                    <Link to={`/index/albumlist/${item.id}`}>
                    <Image width={150} height={100} src={item.cover===''?'':item.cover}/>
                    <div className="Album_contentcontainer_title">
                    <span>{item.name}</span>{item.encrypted?<LockTwoTone/>:<UnlockTwoTone/>}
                    </div>
                    </Link>
                    </div>
                    
                )
            })}
        </div>
        <div className='Album_btncontainer'>
            <Button icon={<PlusCircleOutlined/>} onClick={()=>{addAlbum()}}>新建相册</Button>
        </div>

        <div className='qqcontainer'>
            <Row type="flex" justify="center">
                <Col className='qqcontainer_col' span={6}>
                    <Button onClick={()=>{
                        handleQQ()
                    }} type="primary" icon={<QqOutlined/>}>通过QQ上传图片</Button>
                </Col>
            </Row>
        </div>
        </div>
    )
}

const mapState =(state)=>({
    Album:state.Album
})

const mapDispatch=(dispatch)=>({
    AlbumDispatch:dispatch.Album
})

export default connect(mapState,mapDispatch)(Album);